<template>
  <div class="team-performance">
    <my-header title="团队绩效" :back="goBack">
      <span @click="selectDateTime" slot="right">选择日期</span>
    </my-header>

    <div class="teamRecord">
      <span class="selectTime">查询日期：{{chooseTime}}</span>
      <span class="title">团队当月销售总额:
        <span>{{totalMoney}}</span>
      </span>
      <span class="backPoint">返点率：{{backPoint}}</span>
    </div>
    <div class="order-item">
      <div class="order-box" v-for="item in 6">
        <span class="member-name merchant-arrow">测试</span>
        <span class="order-info-title"> 订单数：200件</span>
        <span class="order-info-title"> 订单数：200件</span>
        <span class="order-info-title"> 订单数：200件</span>
      </div>
    </div>
    <mt-datetime-picker ref="picker" type="date" v-model="selectedDate" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
      :startDate="startDate" :endDate="endDate" @confirm="handleChange">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import MyHeader from "@/components/Header";
  export default {
    name: "TeamPerformance",
    components: {
      MyHeader
    },
    data() {
      return {
        value: null,
        selectedDate: null,
        chooseTime: new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月",
        startDate: new Date("2014"),
        endDate: new Date(),
        totalMoney: "20000",
        backPoint: "6%"
      };
    },
    methods: {
      selectDateTime () {
        this.$refs.picker.open();
      },
      goBack () {
        window.history.go(-1);
      },
      handleChange(value) {
        // this.date1 = value.toString();
        let dateTime = this.$Utils.DateFormat(value.toString());
        let newDate = new Date(dateTime);
        this.chooseTime =
          newDate.getFullYear() + "年" + (newDate.getMonth() + 1) + "月";
      }
    }
  };

</script>

<style lang="scss" scoped>
  @import "../assets/css/px2rem";
  @import "../assets/css/variable";

  .teamRecord {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    padding: 0.5rem 0;
    /* background-color: $theme-color; */
    border-radius: 0.6rem;
    width: 95%;
    margin: 0 auto;
    margin-top: 0.5rem;
    border: 1px solid $theme-color;
    .title,
    .backPoint,
    .selectTime {
      color: #333333;
      width: 95%;
      margin: 0 auto;
      display: block;
      font-size: 0.65rem;
      padding: 0.15rem 0;
    }
  }

  .order-item {
    width: 100%;
    min-height: 73%;
    height: 73%;
    position: fixed;
    margin-top: .4rem;
    overflow-y: auto;
    .order-box {
      float: left;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-top: 0.02666667rem solid #ccc;
      border-bottom: 0.02666667rem solid #ccc;
      font-size: .65rem;
      padding: .25rem 0.35rem;
      .order-info-title {
        display: block;
      }
    }
  }

  .team-performance {
    position: fixed;
    left: 0;
    width: 100%;
    padding-top: px2rem($header-height);
    height: 100%;
  }

</style>
